<template>
	<view class="container">
		<view class="Frame">
			<image class="Background" src="/static/图片/绿色背景.jpg"></image>
			<view @click="goDetail">
				<view class="Name">狡猾的狐狸</view>
				<view class="touxiang">
					<image class="t-toux" src="/static/图片/头像.jpeg"></image>
				</view>
				<view class="ID">ID：202420250101</view>
				<view class="arrow-id">
					<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
				</view>
			</view>
		</view>

		<view class="Like" @click="gotoLikes">
			<view>
				<view class="like"><view class="t-icon t-icon-heart-fill"></view></view>
				<view class="text">点赞</view>
			</view>
			<view class="arrow1">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Favourite">
			<view>
				<view class="favourite"><view class="t-icon t-icon-shoucang"></view></view>
				<view class="text">我的收藏</view>
			</view>
			<view class="arrow2">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Footprint" @click="goFootPrint">
			<view>
				<view class="footprint"><view class="t-icon t-icon-zhinanzhen"></view></view>
				<view class="text">我的足迹</view>
			</view>
			<view class="arrow3">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Feedback" @click="gotoFeedBack">
			<view>
				<view class="feedback"><view class="t-icon t-icon-message"></view></view>
				<view class="text">问题反馈</view>
			</view>
			<view class="arrow4">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Password" @click="redirectDetail">
			<view>
				<view class="password"><view class="t-icon t-icon-xiugaimima"></view></view>
				<view class="text">修改密码</view>
			</view>
			<view class="arrow5">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Contact">
			<view>
				<view class="contact"><view class="t-icon t-icon-tubiaozhizuomoban-"></view></view>
				<view class="text">联系我们</view>
			</view>
			<view class="arrow6">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view class="Sign-out">
			<view>
				<view class="sign-out"><view class="t-icon t-icon-tuichudenglu"></view></view>
				<view class="text">退出登录</view>
			</view>
			<view class="arrow7">
				<image src="/static/svg/arrow01.svg" mode="" style="width: 20px; height: 20px"></image>
			</view>
		</view>
		<view>
			<TabBar></TabBar>
		</view>
	</view>
</template>

<script setup>
import TabBar from '@/components/tabBar/index.vue';

const redirectDetail = () => {
	uni.navigateTo({
		url: '/pages/personal/components/changePassword/index?id=1&name=个人中心',
		success: function () {
			console.log('跳转成功');
		}
	});
};
const goDetail = () => {
	uni.navigateTo({
		url: '/pages/personal/components/details/index'
	});
};
const goFootPrint = () => {
	uni.navigateTo({
		url: '/pages/personal/components/footprint/index'
	});
};

const gotoFeedBack = () => {
	uni.navigateTo({
		url: '/pages/personal/components/feedback/index'
	});
};

const gotoLikes = () => {
	uni.navigateTo({
		url: '/pages/personal/components/likes/index'
	});
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.t-icon {
	width: 29px;
	height: 29px;
}
.t-icon-zhinanzhen {
	width: 42px;
	height: 42px;
}
.t-icon-shoucang {
	width: 27px;
	height: 27px;
}
.t-icon-xiugaimima {
	width: 27px;
	height: 27px;
}
.touxiang {
	position: absolute;
	top: 8%;
	left: 2%;
}
.t-toux {
	height: 95px;
	width: 95px;
	position: absolute;
	border-radius: 50%;
}

.Frame {
	background-size: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: whitesmoke;
	border: 1px solid whitesmoke;
}
.Background {
	height: 100%;
	width: 100%;
	opacity: 30%;
}

.Avatar {
	position: absolute;
	top: 5%;
	left: 3%;
}

.Name {
	position: absolute;
	top: 12%;
	left: 28%;
	font-family: 黑体;
	font-weight: 500;
	font-size: 18px;
}
.ID {
	position: absolute;
	top: 15%;
	left: 28%;
	font-family: 黑体;
	font-weight: 500;
	font-size: 18px;
	color: rgb(77, 136, 156);
}

.Like {
	width: 96%;
	height: 6%;
	top: 28%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.like {
	position: absolute;
	top: 24%;
	left: 2%;
}
.Favourite {
	width: 96%;
	height: 6%;
	top: 36%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.favourite {
	position: absolute;
	top: 24%;
	left: 3%;
}
.Footprint {
	width: 96%;
	height: 6%;
	top: 44%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footprint {
	position: absolute;
	top: 0%;
	left: 1%;
}
.Feedback {
	width: 96%;
	height: 6%;
	top: 52%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.feedback {
	position: absolute;
	top: 21%;
	left: 3%;
}
.Password {
	width: 96%;
	height: 6%;
	top: 60%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.password {
	position: absolute;
	top: 22%;
	left: 3%;
}
.Contact {
	width: 96%;
	height: 6%;
	top: 68%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.contact {
	position: absolute;
	top: 24%;
	left: 3%;
}
.Sign-out {
	width: 96%;
	height: 6%;
	top: 76%;
	left: 2%;
	background-color: white;
	border-radius: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sign-out {
	position: absolute;
	top: 22%;
	left: 3%;
}
.text {
	position: absolute;
	top: 30%;
	left: 12%;
	font-size: 20px;
	font-family: 黑体;
	color: rgb(77, 136, 156);
}
.arrow-id {
	position: absolute;
	top: 15%;
	right: 4%;
}
</style>
